/*******************************************************************************
 * 弹窗可拖拽的指令
 ******************************************************************************/
import { App } from "vue"
export const tuozhuaizhuce = (app: App) => {
    // 鼠标按下的回调
    const tuodongfunc = (el: HTMLElement, e: MouseEvent) => {
        let x = e.clientX - el.offsetLeft;
        let y = e.clientY - el.offsetTop;
        // 鼠标拖动回调
        document.onmousemove = () => {
            let xx = e.clientX - x + "px";
            let yy = e.clientY - y + "px";
            el.style.left = xx;
            el.style.top = yy;
        }
        // 鼠标放开回调
        document.onmouseup = () => {
            // 拖动结束，置空监听
            document.onmouseup = null
            document.onmousemove = null
        }
    }
    // 注册指令
    app.directive('tuozhuai', {
        mounted: function (el: any,) {
            el.addEventListener("mousedown", (e: MouseEvent) => {
                tuodongfunc(el, e)
            })
        },
        unmounted: function (el: any,) {
            el.removeEventListener("mousedown", (e: MouseEvent) => {
                tuodongfunc(el, e)
            })
        }
    })
}

